<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转正方体</title>
    <style>
        body { margin: 0; }
    </style>
</head>

<body>
    <script src="./js/three.min.js"></script>
    <script>
        class ThreeJs {
            constructor() {
                this.init()
            }

            init() {
                // 第一步新建一个场景
                this.scene = new THREE.Scene()
                this.setCamera()
                this.setRenderer()
                this.setCube() 
                this.animate()
            }

            // 新建透视相机
            setCamera() {
                // 第二参数就是 长度和宽度比 默认采用浏览器  返回以像素为单位的窗口的内部宽度和高度
                this.camera = new THREE.PerspectiveCamera(
                    75,
                    window.innerWidth / window.innerHeight,
                    0.1,
                    1000
                )
                this.camera.position.z = 5
            }

            // 设置渲染器
            setRenderer() {
                this.renderer = new THREE.WebGLRenderer()
                // 设置画布的大小
                this.renderer.setSize(window.innerWidth, window.innerHeight)
                //这里 其实就是canvas 画布  renderer.domElement
                document.body.appendChild(this.renderer.domElement)
            }

            // 设置环境光
            setLight() {
                this.ambientLight = new THREE.AmbientLight(0xffffff) // 环境光
                this.scene.add(ambientLight)
            }

            setCube() {
                const geometry = new THREE.BoxGeometry()
                const material = new THREE.MeshBasicMaterial({ color: 0xff3200 })
                const cube = new THREE.Mesh(geometry, material)
                this.scene.add(cube)
                this.cube = cube
                this.render()
            }

            render() {
                this.renderer.render(this.scene, this.camera)
            }

            animate() {
                requestAnimationFrame(this.animate.bind(this))
                this.cube.rotation.x += 0.01
                this.cube.rotation.y += 0.01
                this.render()
            }
        }

        let app = new ThreeJs();
    </script>
</body>

</html>